<template>
	<div>
		<div class="login_container">
			<div class="login_box">
				<img src="../../assets/smallIcon/logo(white).png" alt="" class="logo">
			</div>
			<div class="login_show">
				<ul class="title">
					<li>
						<router-link to="/layout/login">登录</router-link>				
					</li>
					<li>
						注册
						<span></span>
					</li>
				</ul>
			</div>
			<div class="userInfo">
				<div class="user_inner">
					<ul>
						<li>
							<img src="../../assets/smallIcon/person.png"  alt="">
							<input type="text" placeholder="请输入手机号或邮箱" class="first"@blur="validPhone" v-model='phones' v-if='isPhoneRight' />
							<span v-else class="showMsg" @click="resetPhone" >{{phoneMsg}}</span>
						</li>
						<li>
							<img src="../../assets/smallIcon/password.png" alt="">
							<input type="password" placeholder="请输入密码" @blur="validPwd" v-model='pwds' v-if='isPwdRight' />
							<span v-else  class="showMsg" @click="resetPwd" >{{pwdMsg}}</span>
							<a href="javascript:;">获取验证码</a>
							<p id="line"></p>
						</li>
					</ul>
				</div>
				<div class="reg" @click="reg">
					注册
				</div>
				<div class="explain">说明：注册/登录代表您已同意《路上用户协议》</div>
				<div class="three">
					<img src="../../assets/smallIcon/third party account login .png" alt="">
					<span>第三方登录</span>
				</div>
				<ul class="icon">
					<li><img src="../../assets/smallIcon/qq.png" alt=""></li>
					<li><img src="../../assets/smallIcon/weixin.png" alt=""></li>
					<li><img src="../../assets/smallIcon/weibo.png" alt=""></li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>

export default {
	name:"register",
	data(){
		return{
			phones:'',
			pwds:'',
			phoneMsg:'',
			pwdMsg:'',
			isPhoneRight:true,
			isPwdRight:true
		}
	},
	methods:{
		validPhone(){
			var phoneNum=this.phones;
			var re1 = /^1\d{10}$/ig;
			var re2 = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/ig;
	     	if (phoneNum === '') {
	     		this.isPhoneRight=false;
	     		this.phoneMsg='用户名不能为空'
	     	}
	     	else if(re1.test(phoneNum)||re2.test(phoneNum)){
	     		
	     	}else{
	     		this.isPhoneRight=false;
	     		this.phoneMsg='请输入正确格式的用户名'
	     	}
        
		},
		validPwd(){
			var pwdNum=this.pwds;	
	     	if (pwdNum === '') {
	     		this.isPwdRight=false;
	     		this.pwdMsg='密码不能为空'
	     	}else if(pwdNum.length>12||pwdNum.length<6){
				this.isPwdRight=false;
	     		this.pwdMsg='请输入6-12位长度的密码'
	     	}
		},
		resetPhone(){
			this.isPhoneRight=true;
	     	this.phoneMsg='';
		},
		resetPwd(){
			this.isPwdRight=true;
	     	this.pwdMsg='';
		},
		reg(){
			this.$axios.post("http://localhost:3000/register",{
	            username:this.phones,
	            password:this.pwds
	          })
	          .then(res=>{
	            if(res.data.msg=="success"){
	              alert("注册成功，请登录");
	              location.href='#/layout/login'
	            }else{
	              alert("注册失败");
	              this.reload();
	            }
	          })
	          .catch(error=>{
	            console.log(error);
	          })
			}
		
	}
}

</script>
<style scoped lang="less">
	.login_container{
		background: url(../../assets/landscape/background.png) no-repeat;
		width: 100%;
		height:1334 /50rem;
		.login_box{
			width: 650 /50rem;
			margin: 0 auto;
			text-align: center;
			.logo{
				width: 151 /50rem;
				height: 234 /50rem;
				margin-top: 139 /50rem;
			}
		}
		.login_show{
			margin: 0 auto;
			margin-top: 66 /50rem;
			width: 650 /50rem;
			ul{
				display: flex;
				li{
					float: left;
					flex:1;
					text-align: center;
					font-weight: bold;
					font-size: 36 /50rem;
					color:#ffffff;
					font-family: PingFangSC-Ultralight, sans-serif;
				}
				li:nth-child(2){
					position: relative;
					span{
						position: absolute;
						top:50%;
						right: 40%;
						display: block;
						width: 0;
						height: 0;
						border-bottom: 33/50rem solid #fff;
						border-top:33/50rem solid transparent;
						border-left:33/50rem solid transparent;
						border-right:33/50rem solid transparent;
					}
				}
			}
		}
		.userInfo{
			width: 650 /50rem;
			background: #fff;
			border-radius: 10/50rem;
			margin: 0 auto;
			margin-top: 47 /50rem;
			overflow: hidden;
			.user_inner{
				width: 554 /50rem;
				margin: 0 auto;
				margin-top: 70 /50rem;
				ul{
					li:nth-child(1){
						border-bottom: 2/50rem solid #4fa4db;
					}
					li{
						height: 95 /50rem;
						line-height: 95 /50rem;
						span{
							color:red;
						}
						#line{
							width: 390 /50rem;
							height: 2 /50rem;
							background-color: #4fa4db;
						}
						img{
							width: 36/50rem;
							height: 36/50rem;
							vertical-align: middle;
							margin-right: 15 /50rem;
						}
						input{
							border: none;
							outline: none;
						}
						a{
							color:#4fa4db;
							// width: 154 /50rem;
							height: 70 /50rem;
							margin-top: 22 /50rem;
							text-align: center;
							line-height: 70 /50rem;
							float: right;
							border: 2 /50rem solid #4fa4db;
							border-radius: 10 /50rem;
							padding: 0 5/50rem;
						}
					}
				}
			}
			.reg{
				width: 550 /50rem;
				height: 85 /50rem;
				line-height: 85 /50rem;
				margin: 0 auto;
				margin-top: 85 /50rem;
				text-align: center;
				background-color: #4fa4db;
				color:#fff;
				font-size: 36 /50rem;
				font-weight: bold;
				border-radius: 15 /50rem;
				box-shadow: 0 5/50rem 20/50rem #4fa4db;
			}
		}
		.explain{
			text-align: center;
			font-size: 18 /50rem;
			color:#4fa4db;
			margin-top: 100 /50rem;
		}
		.three{
			text-align: center;
			position: relative;
			height: 90 /50rem;
			margin-top: 40 /50rem;
			// line-height: 90 /50rem;
			img{
				width: 550 /50rem;
				height: 2 /50rem;
			}
			span{
				position: absolute;
				left: 41%;
				font-size: 18 /50rem;
				top:10 /50rem;
				color:#4fa4db;
			}
		}
		.icon{
			display: flex;
			margin-bottom: 58 /50rem;
			li{
				flex:1;
				text-align: center;
				img{
					width: 60 /50rem;
					height: 60 /50rem;
				}
			}
		}
	}
</style>